// 获取.item的宽度
var itemWidth = $(".box .item").width();
// 间隔
var gap = 18;
// 获取.box的宽度
var boxWidth = $(".box").width();
// 求出最大列数
var maxColumnNum = Math.floor( boxWidth / itemWidth );


// 封装一个瀑布流函数
function waterfall(){
    // 统计各个列的高度
    var arrHeight = [];
    // 遍历.box .item
    $(".box .item").each( function( index , domElement ){
        if( index < maxColumnNum ){// 如果下标小于5,那么就是第一行

            // 设置left和top值
            $(domElement).css({
                top: 0,
                left: (itemWidth + gap)*index
            });

            // 添加高度到数组中
            arrHeight.push( $(domElement).outerHeight() );
        }else{
            // 找到arrHeight里面最小值以及最小值对应的下标
            
            // 最小值
            var minVal = Math.min.apply( null, arrHeight );

            // 最小值所在下标
            var minIndex = arrHeight.indexOf( minVal );

            // 设置left和top值
            $(domElement).css({
                top: minVal + gap ,
                left: (itemWidth+gap) * minIndex
            });

            // 当前.item的高度
            var currentItemHeight = $(domElement).outerHeight();

            // 更新列高度
            arrHeight[minIndex] = minVal + gap + currentItemHeight;
        }
    });
    
    // 求出arrHeight数组最大值
    var maxVal = Math.max.apply( null , arrHeight );
    // 设置.box的高度
    $(".box").height( maxVal );
}


// 手动调用一次函数
waterfall();

// 数据
var data = [
    {
        imgNum:"01",
        name:"拥有一台宾利GT，如何拍，才不会被说炫富？",
        uname:"金英焕",
        num: 102
    },{
        imgNum:"02",
        name:"🛁清凉一夏，宝宝用的这些东西你🉐知道…",
        uname:"我是牛油果呀呀",
        num:112 
    },{
        imgNum:"03",
        name:"这些超火的动漫台词你绝对都有听过",
        uname:"学说日语",
        num:305 
    },{
        imgNum:"04",
        name:"高段位的科学育儿理念！原来是它～",
        uname:"小迷姐儿是豆豆龙",
        num: 101
    },{
        imgNum:"05",
        name:"没想到因为婴儿推车，我居然被孩子爸夸了…",
        uname:"我是牛油果呀呀",
        num: 164
    },{
        imgNum:"06",
        name:"日常vlog｜妈妈、博主，每天身份转换",
        uname:"木夕_木",
        num: 976
    },{
        imgNum:"07",
        name:"这个食谱摆摊能不能赚到学费大家帮忙参考一下😂",
        uname:"彭雨荷baby",
        num: 1373
    },{
        imgNum:"08",
        name:"和油污蟑螂say byebye｜厨房清洁好物分享",
        uname:"Cikoe",
        num: 60
    },{
        imgNum:"09",
        name:"上街超惹眼宏光MINI EV，市区代步车性价高",
        uname:"一颗小甜欣",
        num: 80
    },{
        imgNum:"10",
        name:"📢快开学了！！！再不准备就晚了✅",
        uname:"我叫小豆浆",
        num: 261
    },{
        imgNum:"11",
        name:"莆田探店｜时雾美术馆",
        uname:"iamlittley",
        num: 43
    },{
        imgNum:"12",
        name:"参加活动遇到喜欢博主 瞬间变成小迷妹",
        uname:"Chili徐辣儿",
        num: 112
    },{
        imgNum:"13",
        name:"学习干货📖各科笔记记什么，不看后悔✓",
        uname:"贺叫兽",
        num: 1687
    },{
        imgNum:"14",
        name:"白色的川崎H2你见过吗",
        uname:"机车目录",
        num: 146
    },{
        imgNum:"15",
        name:"My Melody🎀｜美乐蒂少女心生活助手",
        uname:"鸭鸭吃饭啦",
        num: 2148
    },{
        imgNum:"16",
        name:"女生必学紧急瘦身法‼️一周就能瘦八斤✔️",
        uname:"桃桃爱吃桃",
        num: 910
    },{
        imgNum:"17",
        name:"梅家晚饭",
        uname:"梅之小榭",
        num: 129
    },{
        imgNum:"18",
        name:"越护肤越油❓分享混油痘肌的自用经验",
        uname:"宁七七Yuki",
        num: 84
    },{
        imgNum:"19",
        name:"『NO.62』写作课📒Ⅰ含写作书单整理📚",
        uname:"苏悠扬",
        num: 163
    },{
        imgNum:"20",
        name:"魔都探店｜芋泥牛奶冰沙‼️宝藏甜品店‼️",
        uname:"Angela影",
        num: 869
    }
];
    
// 给.more查看更多绑定鼠标点击事件
$(".more").on("mousewheel",function(){
    // sort是数组排序的方法
    data.sort(function(){
        // 可以打乱数组元素的排序
        return Math.random()-0.5;
    });

    // 选出前5个数组元素  splice会影响原数组
    var newData = data.splice(0, 5 );

    // 判断数组是否为空
    if( newData.length == 0 ){
        $(".more").text("已经全部加载完毕,没有更多了~").css("color","gray").css("cursor","not-allowed");
        return;
    };

    // 遍历newData
    newData.forEach( function( item, index ){
        // 创建了新的.item
        var $newItem = $(`<div class="item">
            <a href="#">
                <img src="images/pic/${item.imgNum}.jpg" class="pic"/>
                <div class="item_box">
                    <div class="small-title"><img src="./images/touxiang/下载.png"class="jin"> 绘画</div>
                    <p class="titlE">${item.name}</p>
                    <div class="user_box clearfix">
                        <div class="user_img fl">
                            <img src="images/touxiang/${item.imgNum}.jpg"/>
                            <span class="uname">${item.uname}</span>
                        </div>

                        <div class="collect fr">
                            <img src="images/touxiang/点赞赞.png"/>
                            <span class="num">${item.num}</span>
                        </div>
                    </div>
                </div>
                <div class="mask"></div>
            </a>
        </div>`);

        // 添加新的.item进.box中
        $(".box").append(  $newItem );

        // 隐藏$newItem
        $newItem.hide();

        // 淡入$newIem
        $newItem.fadeIn( 400 );
    });

    // 延时器
    setTimeout(function(){
        // 调用瀑布流函数
        waterfall();

        // 动画滚动页面
        $("body,html").animate({
            "scrollTop" : $(document).height() 
        }, 1000 );

    }, 100 );
    
});